<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>急速文件 - 文件浏览</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <style>
        .category-tabs {
            display: flex;
            overflow-x: auto;
            padding: 10px 0;
            margin: 10px 0;
            scrollbar-width: none;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            flex: 0 0 auto;
            padding: 8px 16px;
            margin: 0 5px;
            border-radius: 20px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-tab:first-child {
            margin-left: 16px;
        }
        
        .category-tab:last-child {
            margin-right: 16px;
        }
        
        .category-tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .date-separator {
            padding: 12px 16px 8px;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="left">9:41</div>
            <div class="center"></div>
            <div class="right">
                <i class="fas fa-signal" style="margin-right: 5px;"></i>
                <i class="fas fa-wifi" style="margin-right: 5px;"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-bar-title">文件</div>
            <div>
                <i class="fas fa-search" style="margin-right: 16px;"></i>
                <i class="fas fa-plus"></i>
            </div>
        </div>
        
        <!-- 应用内容区 -->
        <div class="app-content">
            <!-- 分类标签 -->
            <div class="category-tabs">
                <div class="category-tab active">
                    <i class="fas fa-border-all" style="margin-right: 5px;"></i> 全部
                </div>
                <div class="category-tab">
                    <i class="fas fa-image" style="margin-right: 5px;"></i> 图片
                </div>
                <div class="category-tab">
                    <i class="fas fa-file-video" style="margin-right: 5px;"></i> 视频
                </div>
                <div class="category-tab">
                    <i class="fas fa-file-alt" style="margin-right: 5px;"></i> 文档
                </div>
                <div class="category-tab">
                    <i class="fas fa-music" style="margin-right: 5px;"></i> 音频
                </div>
            </div>
            
            <!-- 文件列表 -->
            <div>
                <!-- 今天 -->
                <div class="date-separator">今天</div>
                
                <div class="list-item">
                    <div class="list-item-icon" style="background-color: #E1F5FE; border-radius: 6px;">
                        <img src="https://via.placeholder.com/40x40" alt="家庭照片缩略图" style="width: 40px; height: 40px; object-fit: cover; border-radius: 6px;">
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">家庭照片.jpg</div>
                        <div class="list-item-subtitle">2.5 MB • 刚刚</div>
                    </div>
                    <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                </div>
                
                <div class="list-item">
                    <div class="list-item-icon" style="background-color: #E8EAF6;">
                        <i class="far fa-file-word" style="color: #3F51B5;"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">工作报告.docx</div>
                        <div class="list-item-subtitle">1.2 MB • 2小时前</div>
                    </div>
                    <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                </div>
                
                <!-- 昨天 -->
                <div class="date-separator">昨天</div>
                
                <div class="list-item">
                    <div class="list-item-icon" style="background-color: #FFF3E0;">
                        <i class="far fa-file-video" style="color: #FF9800;"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">旅行视频.mp4</div>
                        <div class="list-item-subtitle">256 MB • 昨天</div>
                    </div>
                    <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                </div>
                
                <div class="list-item">
                    <div class="list-item-icon" style="background-color: #E8F5E9;">
                        <i class="far fa-file-audio" style="color: #4CAF50;"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">语音备忘录.mp3</div>
                        <div class="list-item-subtitle">3.5 MB • 昨天</div>
                    </div>
                    <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-folder tab-icon"></i>
                <span class="tab-label">文件</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-image tab-icon"></i>
                <span class="tab-label">相册</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-cog tab-icon"></i>
                <span class="tab-label">设置</span>
            </div>
        </div>
    </div>
</body>
</html> 